<template>
    <el-menu style="min-height: 100%;overflow-x: hidden" background-color="#333744" text-color="#fff"
      active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" :default-active="$route.path"
      router>
      <div style="height: 60px;line-height: 60px;text-align: center">
        <img src="../assets/logo.svg" alt="" style="width: 20px;position: relative;top: 5px;margin-right: 5px">
        <b style="color: #fff" v-show="logoTextShow">{{ $t("common.description") }}</b>
      </div>
      <div v-for="item in menus" :key="item.id">
        <div v-if="item.path">
          <el-menu-item :index="item.path">
            <component :is="item.icon" style="width: 18px; height: 18px; margin-right: 4px;" :title="item.name">
            </component>
            <template #title>{{ item.name }}</template>
          </el-menu-item>
        </div>
        <div v-else>
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <component :is="item.icon" style="width: 18px; height: 18px; margin-right: 4px;" />
              <span>{{ item.name }}</span>
            </template>
            <div v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.path">
                <component :is="subItem.icon" style="width: 18px; height: 18px" />
                <template #title>{{ subItem.name }}</template>
              </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
      </div>
    </el-menu>
  </template>
  
  <script>
  export default {
    name: "Aside",
    props: {
      isCollapse: Boolean,
      logoTextShow: Boolean
    },
    beforeCreate() {
      const employee = {"employeeid":72,"username":"wxy","password":"1dd577758759c22a1c5d658b2900d1d6","employeename":"测试人员甲","token":"eyJhbGciOiJIUzUxMiJ9.eyJhX2lkIjo3MiwiZXhwIjoxNzE2NzY2MDc2fQ.mm-_sVoa5dcGUhoFAaaHfUDkXL76L4h6qTXOwF3Pese1ZnNePbtz91WL9Pe1FUY_VYsAJqZEJVYWY3bikOLOxw","role":"ROLE_TEST","lang":"zh","menus":[{"id":1,"name":"首页","path":"/home","icon":"HomeFilled","description":"首页","pid":null,"pagePath":"Home","children":[],"sortNum":1,"lang":"zhCn"},{"id":35,"name":"品牌管理","path":"/band","icon":"Help","description":"品牌管理","pid":null,"pagePath":"/Client/band","children":[],"sortNum":3,"lang":"zhCn"},{"id":36,"name":"客户端管理","path":"/client","icon":"Fold","description":"客户端管理","pid":null,"pagePath":"/Client/client","children":[],"sortNum":4,"lang":"zhCn"},{"id":84,"name":"PAD设备管理","path":"/pad","icon":"Cellphone","description":"PAD设备管理","pid":null,"pagePath":"/Upgrade/pad","children":[],"sortNum":4,"lang":"zhCn"},{"id":37,"name":"菜单版本管理","path":"/caidan","icon":"Calendar","description":"菜单版本管理","pid":null,"pagePath":"/Client/menu","children":[],"sortNum":5,"lang":"zhCn"},{"id":80,"name":"ECU刷写管理","path":"/ecu","icon":"RefreshRight","description":"ECU刷写管理","pid":null,"pagePath":"/Client/ecu","children":[],"sortNum":5,"lang":"zhCn"},{"id":38,"name":"诊断报告管理","path":"/report","icon":"EditPen","description":"诊断报告管理","pid":null,"pagePath":"/Diagnostic/report","children":[],"sortNum":6,"lang":"zhCn"},{"id":43,"name":"诊断程序管理","path":"/program","icon":"Menu","description":"诊断程序管理","pid":null,"pagePath":"/Diagnostic/program","children":[],"sortNum":7,"lang":"zhCn"},{"id":40,"name":"应用软件管理","path":"/apps","icon":"Refresh","description":"应用软件管理","pid":null,"pagePath":"/App/apps","children":[],"sortNum":9,"lang":"zhCn"}]}
      localStorage.setItem("employee", JSON.stringify(employee) )
      const menus = [{"id":1,"name":"首页","path":"/home","icon":"HomeFilled","description":"首页","pid":null,"pagePath":"Home","children":[],"sortNum":1,"lang":"zhCn"},{"id":35,"name":"品牌管理","path":"/band","icon":"Help","description":"品牌管理","pid":null,"pagePath":"/Client/band","children":[],"sortNum":3,"lang":"zhCn"},{"id":36,"name":"客户端管理","path":"/client","icon":"Fold","description":"客户端管理","pid":null,"pagePath":"/Client/client","children":[],"sortNum":4,"lang":"zhCn"},{"id":84,"name":"PAD设备管理","path":"/pad","icon":"Cellphone","description":"PAD设备管理","pid":null,"pagePath":"/Upgrade/pad","children":[],"sortNum":4,"lang":"zhCn"},{"id":37,"name":"菜单版本管理","path":"/caidan","icon":"Calendar","description":"菜单版本管理","pid":null,"pagePath":"/Client/menu","children":[],"sortNum":5,"lang":"zhCn"},{"id":80,"name":"ECU刷写管理","path":"/ecu","icon":"RefreshRight","description":"ECU刷写管理","pid":null,"pagePath":"/Client/ecu","children":[],"sortNum":5,"lang":"zhCn"},{"id":38,"name":"诊断报告管理","path":"/report","icon":"EditPen","description":"诊断报告管理","pid":null,"pagePath":"/Diagnostic/report","children":[],"sortNum":6,"lang":"zhCn"},{"id":43,"name":"诊断程序管理","path":"/program","icon":"Menu","description":"诊断程序管理","pid":null,"pagePath":"/Diagnostic/program","children":[],"sortNum":7,"lang":"zhCn"},{"id":40,"name":"应用软件管理","path":"/apps","icon":"Refresh","description":"应用软件管理","pid":null,"pagePath":"/App/apps","children":[],"sortNum":9,"lang":"zhCn"},{"id":9,"name":"系统管理员","path":null,"icon":"Avatar","description":"系统管理员","pid":null,"pagePath":null,"children":[{"id":12,"name":"员工管理","path":"/search","icon":null,"description":null,"pid":9,"pagePath":"Personnel management/Search","children":null,"sortNum":null,"lang":"zhCn"}],"sortNum":13,"lang":"zhCn"},{"id":14,"name":"权限管理","path":null,"icon":"Share","description":null,"pid":null,"pagePath":null,"children":[{"id":15,"name":"角色管理","path":"/role","icon":null,"description":null,"pid":14,"pagePath":"sys/Role","children":null,"sortNum":null,"lang":"zhCn"},{"id":16,"name":"菜单管理","path":"/menu","icon":null,"description":null,"pid":14,"pagePath":"sys/Menu","children":null,"sortNum":null,"lang":"zhCn"}],"sortNum":14,"lang":"zhCn"}]
      localStorage.setItem("menus", JSON.stringify(menus) )
      const token = "eyJhbGciOiJIUzUxMiJ9.eyJhX2lkIjo3MiwiZXhwIjoxNzE2NzY2MDc2fQ.mm-_sVoa5dcGUhoFAaaHfUDkXL76L4h6qTXOwF3Pese1ZnNePbtz91WL9Pe1FUY_VYsAJqZEJVYWY3bikOLOxw"
      localStorage.setItem("token", JSON.stringify(token) )
    },
    data() {      
      return {
        menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
        opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : []
      }
    }
  }
  </script>
  
  <style>
  /*解决收缩菜单文字不消失问题*/
  .el-menu--collapse span {
    visibility: hidden;
  }
  </style>